

<template>
  <el-table :data="tableData.data"
            style="width: 100%">
    <el-table-column prop="id"
                     label="序号"
                     width="80" />
    <el-table-column prop="name"
                     label="姓名"
                     width="180" />
    <el-table-column prop="price"
                     label="价格"
                     width="80" />
    <el-table-column width="200"
                     label="操作">
      <template #default="scope">
        <el-button size="small"
                   @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button size="small"
                   type="danger"
                   @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import { inject, reactive, ref } from "vue";
import { query } from "./api/book";
const $axios = inject('$axios')
//let tableData = ref([])
const tableData = reactive({ data: [] })
$axios.post('/api/book/query', {}).then(res => {
  tableData.data = res.data.data;
})
$axios.request({ url: '/api/book/query', method: 'post', data: {} }).then(res => {
  console.log(res.data);
})
query({}).then(res => {
  console.log("-----自己封装的------query---");
  console.log(res.data);
})
const handleEdit = (index, row) => {
  console.log("------------", index);
  console.log("------------", row);
}


</script>
<style scoped>
</style>
